<!--

    Copyright (c) 2012, Mayocat <hello@mayocat.org>

    This Source Code Form is subject to the terms of the Mozilla Public
    License, v. 2.0. If a copy of the MPL was not distributed with this
    file, You can obtain one at http://mozilla.org/MPL/2.0/.

-->
<h1 class="big">{{'account.title' | translate}}</h1>

<div>
    <button class="btn" ng-click="changeMyPassword()">{{'account.passwordChange.title' | translate}}</button>
</div>

<!-- Deletion modal for articles -->
<script type="text/ng-template" id="changeMyPassword.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="$dismiss()">&times;</button>
        <h3>{{'account.passwordChange.title' | translate}}</h3>
    </div>
    <div class="modal-body">
        <form name="changePassword" novalidate validate-on-blur>
            <fieldset>
                <!-- Current password -->
                <label>{{'account.passwordChange.currentPassword' | translate}}</label>
                <input type="password" class="span3" ng-model="$parent.currentPassword" required />

                <!-- New password -->
                <label>{{'account.passwordChange.newPassword' | translate}}</label>
                <input type="password" class="span3" ng-model="$parent.newPassword" name="newPassword" required minlength="10"/>
                <!-- When we upgrade the angular version:
                       ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" -->

                <div class="alert alert-error" ng-show="changePassword.newPassword.$dirty && changePassword.newPassword.$error.required">
                    {{'global.validation.required' | translate}}</div>

                <!-- Type it again -->
                <label>{{'account.passwordChange.newPasswordAgain' | translate}}</label>
                <input type="password" class="span3" ng-model="newPasswordCheck" name="newPasswordCheck"
                       data-password-verify="newPassword" required />

                <div class="alert alert-error" ng-show="changePassword.newPasswordCheck.$error.passwordVerify && changePassword.newPasswordCheck.$dirty">
                    {{'account.passwordChange.passwordsDoNotMatch' | translate}}</div>

                <div class="alert alert-error" ng-show="isWrongPassword">
                    {{'account.passwordChange.wrongPassword' | translate}}</div>

                <div class="alert alert-error" ng-show="passwordRequirementsNotMet">
                    {{'account.passwordChange.passwordRequirementsNotMet' | translate}}</div>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" ng-click="$dismiss()">
            {{'global.actions.cancel' | translate}}
        </button>
        <button class="btn btn-danger" ng-click="updatePassword()" ng-disabled="changePassword.$invalid">
            {{'account.passwordChange.title' | translate}}
        </button>
    </div>
</script>